<template>
  <Category class="mt-4" @click="handleClick"/>
  <nut-popup position="right" v-model:visible="show" style="width: 80%; height: 100%">
    <nut-side-navbar>
      <nut-sub-side-navbar title="分类" ikey="1">
        <nut-sub-side-navbar title="男袜" ikey="11">
          <nut-side-navbar-item ikey="12" title="莫奈尔" @click="chooseNav('12')"></nut-side-navbar-item>
          <nut-side-navbar-item ikey="13" title="加厚" @click="chooseNav('13')"></nut-side-navbar-item>
        </nut-sub-side-navbar>
        <nut-sub-side-navbar title="女袜" ikey="2">
          <nut-sub-side-navbar title="纯棉" ikey="21">
            <nut-side-navbar-item ikey="22" title="莫奈尔"></nut-side-navbar-item>
            <nut-side-navbar-item ikey="23" title="加厚"></nut-side-navbar-item>
          </nut-sub-side-navbar>
        </nut-sub-side-navbar>
        <nut-sub-side-navbar title="童袜" ikey="3">
          <nut-sub-side-navbar title="纯棉" ikey="31">
            <nut-side-navbar-item ikey="32" title="莫奈尔"></nut-side-navbar-item>
            <nut-side-navbar-item ikey="33" title="加厚"></nut-side-navbar-item>
          </nut-sub-side-navbar>
        </nut-sub-side-navbar>
      </nut-sub-side-navbar>
    </nut-side-navbar>
  </nut-popup>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import { Category } from "@nutui/icons-vue";

const show = ref(false)
const handleClick = () => {
  show.value = true
}
const chooseNav = (val: string) => {
  console.log(val)
}

</script>

<style scoped lang="scss">

</style>